<template>
<el-container style="height: 100%">
    <el-aside width="auto">
        <commonAside/>
    </el-aside>
    <el-container>
        <el-header>
            <commonHeader/>
        </el-header>
        <commonTag/>
        <el-main>
            <transition name="main" appear>
                <router-view></router-view>
            </transition>
        </el-main>
    </el-container>
</el-container>
</template>
    
<script>
import commonAside from '@/components/commonAside/index.vue'
import commonHeader from '@/components/commonHeader/index.vue'
import commonTag from '@/components/commonTag/index.vue'
export default {
    name:'app',
    data(){
        return {

        }
    },
    components:{ commonAside, commonHeader, commonTag },
    created(){
        const that = this // 存储 this
        function sizeFunc(){ // 更新窗口宽度函数，带防抖
            if(that.timer) clearTimeout(that.timer)
            that.timer = setTimeout(() => {
                const width = document.documentElement.clientWidth
                that.$store.commit('WINDOWWIDTH', width)
            }, 300);
        }
        sizeFunc()
        window.addEventListener('resize', ()=>{ // 监视窗口宽度
            sizeFunc()
        })
    },
}
</script>

<style scoped>
.main-enter-active{
    animation: enter 0.8s;
}
.main-leave-active{
    animation: leave 0.8s;
}
@keyframes enter {
	0%{
        transform: translateX(100px);
        opacity: 0;
        position: absolute;
        top: 0;
	}
	65%{
        transform: translateX(50px);
        opacity: 0;
        position: absolute;
        top: 0;
	}
	100%{
		transform: translateX(0);
        opacity: 1;
        position: absolute;
        top: 0;
	}
}
@keyframes leave {
	0%{
        transform: translateX(0);
        opacity: 1;
	}
	35%{
        transform: translateX(-50px);
        opacity: 0;
	}
	100%{
		transform: translateX(-100px);
        opacity: 0;
	}
}
</style>

<!-- 全局样式 -->
<style>
.ceshi{
    color: #fff;
}
.el-header{
    background-color: #2d2d2e;
}
.el-aside{
    background-color: #333333 ;
}
body .el-main{
    padding: 0;
    position: relative;
    overflow: hidden;
}
</style>

<!-- element-ui-黑夜模式 -->
<style>
/* el-message */
.el-message-box{
    background-color: #333333;
    border: none;
    box-shadow: 0 0 3px 0 rgb(255 255 255 / 80%);
}
.el-message-box .el-message-box__title{
    color: #cfd2d9;
}
.el-message-box .el-message-box__message{
    color: #b1b7bf;
}
/* el-card */
.el-card{
    background-color: #333333;
    border: none;
}
.is-hover-shadow{
    box-shadow: 0 0 3px -1px rgb(255 255 255 / 80%);
}
.el-card.is-always-shadow{
    box-shadow: 0 0 4px -1px rgb(255 255 255 / 80%);
}
/* el-button */
.el-button{
    color: #cfd2d9;
}
.el-button--default{
    background-color: #333333;
    border: 1px solid #868689;
}
.el-button:focus, .el-button:hover{
    background-color: #222222;
    border: 1px solid #9499a0;
}
.el-button--primary {
    background-color: #409EFF;
    border-color: #409EFF;
    color: #fff;
}
.el-button:focus.el-button--primary, .el-button:hover.el-button--primary{
    background-color: #3889de;
    border-color: #409EFF;
}
.el-button--danger {
    background-color: #e06363;
    border-color: #e06363;
    color: #fff;
}
.el-button:focus.el-button--danger, .el-button:hover.el-button--danger{
    background-color: #c75858;
    border-color: #e06363;
}
/* el-dropdown */
.el-dropdown-menu{
    background-color: #333333;
    border: 1px solid #383838;
}
.el-popper[x-placement^=bottom] .popper__arrow{
    border-bottom-color: #868689;
}
.el-popper[x-placement^=bottom] .popper__arrow::after{
    border-bottom-color: #383838;
}
.el-dropdown-menu__item{
    color: #c5c8cf;
}
.el-dropdown-menu .el-dropdown-menu__item:hover{
    background-color: rgb(255 255 255 / 10%);
}
/* el-table */
.el-table{
    color: #c5c8cf;
}
.el-table, .el-table__expanded-cell{
    background-color: #222222;
}
.el-table th.el-table__cell{
    background-color: #222222;
}
.el-table tr{
    background-color: #222222;
}
.el-table thead{
    color: #c5c8cf;
}
.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
    border-bottom: 1px solid #868689;
}
.el-table--border::after, .el-table--group::after, .el-table::before {
    background-color: #868689;
}
.el-table .el-table__row:hover .el-table__cell{
    background-color: rgb(255 255 255 / 10%) !important;
}
.el-table__body tr.hover-row.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped>td.el-table__cell, .el-table__body tr.hover-row>td.el-table__cell {
    background-color: rgb(255 255 255 / 10%);   
}
.el-table__fixed, .el-table__fixed-right {
    box-shadow: 0 0 10px rgb(255 255 255 / 12%);
}
/* el-breadcrumb */
.el-breadcrumb__item .el-breadcrumb__inner,
.el-breadcrumb__item:last-child .el-breadcrumb__inner{
    color: #9499a0;
}
.el-breadcrumb__inner.is-link{
    color: #b1b7bf;
}
/* el-tag */
.el-tag{
    background-color: rgb(64 158 255 / 15%);
    border-color: rgb(64 158 255 / 50%); 
}
.el-tag--dark {
    background-color: #409eff;
    border-color: #409eff;
    color: #fff;
}
/* el-input */
.el-input__inner {
    background-color: #000;
    color: #cfd2d9;
    border: 1px solid #61666d;
}
.el-input__inner:focus {
    border: 1px solid #0984e3;
    box-shadow: 0 0 10px -6px #0984e3;
}
.el-input-group__append, .el-input-group__prepend{
    background-color: #333333;
    border: 1px solid #61666d;
}
.el-input-group__prepend{
    border-right: none;
}
.el-input-group__append{
    border-left: none;
}
.el-input__inner::-webkit-input-placeholder {
    color: #868689;
}
/* el-dialog */
.el-dialog{
    background-color: #333333;
}
.el-dialog__title{
    color: #dcdfe6;
}
.el-dialog__body{
    color: #c5c8cf;
}
/* el-pagination */
.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
    background-color: #61666d;
    color: #ecf0f1;
}
.el-pagination button:disabled {
    color: #ff4757 !important;
}
/* el-form */
.el-form-item__label{
    color: #c5c8cf;
}
/* el-select */
.el-select-dropdown {
    border: 1px solid #868689;
    background-color: #333333;
    box-shadow: 0 2px 12px 0 rgb(255 255 255 / 10%);
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
    background-color: #242424;
}
.el-select-dropdown__item {
    color: #cfd2d9;
}
.el-popper[x-placement^=top] .popper__arrow {
    border-top-color: #868689;
}
.el-popper[x-placement^=top] .popper__arrow::after {
    border-top-color: #333333;
}
</style>